<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>-->
  <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<!--  <script src="Vue.js"></script>-->
</head>
<!--
vue.js 是一套构建用户界面的渐进式框架。
vue 只关注图层 采用自底先上增量开发的设计
vue 的目标是通过尽可能简单的api 实现响应的数据绑定和组合的视图组件
vue.js 的特点和优势
轻量级:
  vue.js 的核心库非常小巧 加载速度快
渐进式框架
  vue 可以自下而上逐层应用. 可以在一个已有项目中使用vue 作为一个简单的视图图层,也可以使用Vue 来管理整个前端应用
易于学习
  vue 的设计非常直观
高性能
  vue的虚拟Dom 和高效的差异化算法,使其具有良好的性能
组件化
  vue 允许使用组件构建应用程序 组件可以复用并且易于维护
双向数据绑定
  vue 提供了简洁易用的双向数据绑定机制 使得数据和视图之间保持同步

1.升级npm
npm install npm --registry=https://registry.npmmirror.com

2. 安装 vue
npm install vue@latest --registry=https://registry.npmmirror.com

3. 使用图像化界面
vue ui


Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目，语法格式如下：
1.npm init vite-app runoob-vue3-test2 --registry=https://registry.npmmirror.com
2.

安装 vue
1、下载到本地
在官网下载后 使用 script 标签引入 https://unpkg.com/vue@3.4.35/dist/vue.global.js

2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.net/vue/3.0.5/vue.global.js

字节跳动 CDN（国内） : https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js

unpkg：https://unpkg.com/vue@3/dist/vue.global.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js


1.vue 打包
npm run build
打包完成后  会生产一个dist 文件夹 在vue 项目根目录下
目录包含
  index.html文件
  static文件夹
    静态文件js
    css 文件
    图片目录 images 如果有图片的话


Vue 创建项目
1. vue create 命令创建项目 以及 vue ui 创建项目
vue create [options] my-project
options 选项可以是：

-p, --preset <presetName>： 忽略提示符并使用已保存的或远程的预设选项
-d, --default： 忽略提示符并使用默认预设选项
-i, --inlinePreset <json>： 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>： 在安装依赖时使用指定的 npm 客户端
-r, --registry <url>： 在安装依赖时使用指定的 npm registry
-g, --git [message]： 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git： 跳过 git 初始化
-f, --force： 覆写目标目录可能存在的配置
-c, --clone： 使用 git clone 获取远程预设选项
-x, --proxy： 使用指定的代理创建项目
-b, --bare： 创建项目时省略默认组件中的新手指导信息
-h, --help： 输出使用帮助信息

2. 使用 vue ui 创建项目

vue 目录结构
my-project-demo
  dist (打包文件)
    --static (静态文件)
      --css (静态文件css)
      --js (静态文件js)
      --images (静态文件图片)
    --index.html (应用的主HTML,VUE CLI会在构建时自动注入生成的静态资源链接)
  node_modules(存放项目的所有依赖包,由npm或yarn自动生成和管理)
  public(静态文件目录,里面的文件不会被webpack处理,最终会原样复制到打包目录下)
    --favicon.ico (网站的图标)
    --index.html (应用的主HTML,VUE CLI会在构建时自动注入生成的静态资源链接)
  src (源代码目录,存放应用的主要代码)
    --asserts (存放图片等静态资源,如图片,字体等,这样文件会被webpack处理,最终会打包到dist目录下)
        --logo.png (示例图像文件)
    --components (存放Vue组件,每个组件都是一个独立的.vue文件)
        --HelloWorld.vue (默认生成的示例组件)
    --views (存放视图组件,通常对应路由,每个视图都是一个独立的.vue文件)
        --Home.vue (默认生成的主页组件)
    --App.vue (根组件,整个应用的入口组件)
    --main.js (应用的入口文件,负责创建Vue 实例并挂载到Dom上)
    --router.js (存放路由配置文件)
        --index.js (路由的配置文件,定义了应用的路由规则)
  .gitignore (Git忽略文件列表,指定那些文件和目录不被包含在版本控制中)
  babel.config.js (Babel的配置文件,用于配置Babel的编译选项)
  package.json (项目的依赖,脚本和其他元数据)
  README.md (项目的说明文件，通常用于描述项目、如何安装和使用等信息。)
  vue.config.js (Vue CLI 的配置文件，用于修改默认配置)
  yarn.lock or package-lock.json 锁定安装的依赖版本，确保项目依赖的一致性。

https://www.runoob.com/vue3/vue3-intro.html

vue 起步
vue.js是一个渐进式 javascript 框架，用于构建用户界面。
vue3 中应用是通过使用 createApp() 方法创建的。
const app = createApp({/* 选项 */})
传递给 createApp() 的选项用于配置根组件 使用mount() 挂载应用时 该组件被用作渲染的起点
Vue.createApp(HelloVueApp).mount('#hello-vue')
createApp() 的参数是根组件 ,在挂载应用时,该组件是渲染的起点
一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。
<div id="hello-vue" class="demo">
  {{ message }}
</div>
mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。
{{ }} 用于输出对象属性和函数返回值。
{{ message }} 对应应用中 message 的值。

data 选项 是一个函数.vue在创建新组件实例过程中调用此函数,它应该返回一个对象,然后vue 会通过响应性系统将其包裹起来,并以$data的形式存储在组件实例中
组件中添加方法 使用method 选项 该选项包含了所需方法的对象

vue3 基础语法
vue.js 是一个渐进式js框架 , 主要用于构建用户界面
vue.js 基础语法和概念 包含模板语法,指令,事件处理,计算属性和组件
<div id="hello-vue" class="demo">
div 元素 具有id为hello-vue 和class为demo
在vue应用中 div将会被vue实例管理 并且会在数据发生变化时更新内容

{{message}}
这是vue.js的模板语法 用于将vue实例中的message属性的值渲染到页面上
当vue实例中的message属性的值发生变化时,vue会自动更新页面上的内容

js语法
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
hellovueapp 是一个普通的js对象 包含了vue组件选项
data() 方法返回一个包含 message 属性的对象 这个属性的初始值 是'hello vue'


创建并挂载 vue应用
vue.createApp() 方法用于创建一个 vue应用实例 参数是一个包含组件选项的对象
.mount('#hello-vue')方法将vue应用实例挂载到页面中具有id为hello-vue的元素上
执行过程
页面加载时，浏览器解析 HTML 和 JavaScript。
Vue.js 脚本执行时，创建了一个 Vue 应用实例，并将其绑定到 <div id="hello-vue"> 元素上。
Vue 应用实例根据 data() 中的初始数据，将 message 的值渲染到页面上的 {{ message }} 处。
当 message 数据发生变化时（例如通过用户交互或异步操作），页面会自动更新以反映这些变化。


模板语法
插值
vue.js使用双大括号 {{}} 来表示文本插值
<div>{{message}}</div>
指令 是带有前缀 v- 的特殊属性,用于在模板中表达逻辑
v-bind 动态绑定一个或多个特性 或一个组件prop
<a v-bind:href="url">Link</a>
简写
<a :href="url">Link</a>
v-if 条件渲染
<p v-if="seen">now you see me</p>
v-for 循环渲染列表
<ul><li v-for="item in items":key="item.id">{{item.text}}</li></ul>
v-model: 双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-on: 事件监听器。
<button v-on:click="doSomething">Click me</button>
简写
<button @click="doSomething">Click me</button>

事件处理
在vue.js中,事件处理程序是一个方法,在模板中通过v-on指令调用,监听dom事件 触发时执行一些js代码
使用 v-on 指令来监听dom事件 v-on:click="doSomething"   简写  @click="doSomething"

计算属性
是基于其依赖进行缓存的属性,计算属性只有在其相关依赖发生变化时才会重新计算
<p>{{reversedMessage}}<p>

const app1 = {methods: {greet() {alert('Hello!');}}}
Vue.createApp(app1).mount('#app');  // 挂载应用 绑定 到id为app的元素上

-->
<body>
<!--事件: 子组件通过$emit触发事件,父组件可以监听这些事件-->
<div id="app1">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Total clicks: {{ total }}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">You clicked me {{ count }} times.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app1');
</script>



<!--Props 用于在组件之间传递数据-->
<!--<div id="app1">-->
<!--  <blog-post title="My journey with Vue"></blog-post>-->
<!--</div>-->

<!--<script>-->
<!--  const app = Vue.createApp({-->
<!--    data() {-->
<!--      return {};-->
<!--    }-->
<!--  });-->

<!--  app.component('blog-post', {-->
<!--    props: ['title'],-->
<!--    template: '<h3>{{ title }}</h3>'-->
<!--  });-->

<!--  app.mount('#app1');-->
<!--</script>-->

<!--组件 允许使用小型,独立和通常可复用的组件构建大型应用-->
<!--<div id="app1">-->
<!--  <my-component></my-component>-->
<!--</div>-->

<!--<script>-->
<!--  const app = Vue.createApp({});-->

<!--  app.component('my-component', {-->
<!--    template: '<div>A custom component!</div>'-->
<!--  });-->

<!--  app.mount('#app1');-->
<!--</script>-->


<!--事件处理-->
<!--<div id="app">-->
<!--  <button @click="greet">Greet</button>-->
<!--</div>-->

<!--<script>-->
<!--  const app1 = {-->
<!--    methods: {-->
<!--      greet() {-->
<!--        alert('Hello!');-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app1).mount('#app');-->
<!--</script>-->

<!--计算属性-->
<!--<div id="app">-->
<!--  <p>{{reversedMessage}}</p>-->
<!--</div>-->

<!--<script>-->
<!-- const app1 = {-->
<!--    data() {-->
<!--      return {-->
<!--        message: 'Hello'-->
<!--      };-->
<!--    },-->
<!--    computed: {-->
<!--      reversedMessage() {-->
<!--        return this.message.split('').reverse().join('');-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  Vue.createApp(app1).mount('#app');-->
<!--</script>-->

<!--data选项是一个函数 vue在创建新组件实例的过程中调用此函数,它应该返回一个对象,然后vue 会通过响应性系统将其包裹起来,并以$data的形式存储在组件实例中-->
<!--<div id="hello-vue" class="demo">-->
<!--  {{message}}-->
<!--</div>-->


<!--<script src="vue_demo1.js"></script>-->
<!--<script>-->
<!--  const app = Vue.createApp({-->
<!--    data() {-->
<!--      return { count: 4 }-->
<!--    }-->
<!--  })-->

<!--  const vm = app.mount('#app')-->

<!--  document.write(vm.$data.count) // => 4-->
<!--  document.write("<br>")-->
<!--  document.write(vm.count)       // => 4-->
<!--  document.write("<br>")-->
<!--  // 修改 vm.count 的值也会更新 $data.count-->
<!--  vm.count = 5-->
<!--  document.write(vm.$data.count) // => 5-->
<!--  document.write("<br>")-->
<!--  // 反之亦然-->
<!--  vm.$data.count = 6-->
<!--  document.write(vm.count) // => 6-->
<!--</script>-->

<!--<div id="hello-vue" class="demo">-->
<!--  {{message}}-->
<!--</div>-->

</body>
</html>
